<template>
	<view>
		<view class="cu-item bg-white margin-lr-sm radius margin-top-sm space-between" :class="[value.myGet?'opacity':'']"
		 v-if="value">
			<view class="w100 padding-sm text-left">
				<view class="text-lg text-black margin-top">{{value.title}}</view>
				<view class="text-gray margin-tb-sm">
					<text v-if="value.range_type==2">仅限部分商品使用</text>
					<text v-else>全场商品可用</text>
				</view>
				<view class="text-gray">
					有限期：<text>{{$common.timeFormat(value.start_time,'YYYY-MM-DD')}}~{{$common.timeFormat(value.end_time,'YYYY-MM-DD')}}</text>
				</view>
			</view>
			<view class="console-control  padding-sm text-center opacity" :class="'bg-'+theme" v-if="value.use_order_id > 0">
				<view class="text-white">
					<block v-if="value.type==1">
						<text class="text-xxxl ">{{value.money}}</text>
					</block>
					<block v-else>
						<text class="text-xxxl ">{{(value.discount/10).toFixed(2)}}</text>折
					</block>
				</view>
				<view class="text-white text-sm margin-top-xs">满{{value.at_least}}可用</view>
				<view class="">
					<image :src="CLOUDPATH+'/marketing-counp-use.png'" mode="aspectFit" class="useimg"></image>
				</view>
			</view>
			<view class="console-control padding-sm text-center opacity" :class="'bg-'+theme" v-else-if="value.end_time < now">
				<view class="text-white">
					<block v-if="value.type==1">
						<text class="text-xxxl ">{{value.money}}</text>
					</block>
					<block v-else>
						<text class="text-xxxl ">{{(value.discount/10).toFixed(2)}}</text>折
					</block>
				</view>
				<view class="">
					<image :src="CLOUDPATH+'/marketing-counp-over.png'" mode="aspectFit" class="useimg"></image>
				</view>
			</view>
			<view class="console-control padding-sm text-center" :class="'bg-'+theme" v-else>
				<view class="text-white">
					<block v-if="value.type==1">
						<text class="text-xxxl ">{{value.money}}</text>
					</block>
					<block v-else>
						<text class="text-xxxl ">{{(value.discount/10).toFixed(2)}}</text>折
					</block>
				</view>
				<view class="text-white text-sm margin-top-xs">满{{value.at_least}}可用</view>
				<view class="cu-btn sm bg-white round  margin-top-sm" v-if="value.myGet">
					<text v-if="isGoods">已领取</text>
					<text v-else @tap="goUse">立即使用</text>
				</view>
				<view class="cu-btn sm bg-white round  margin-top-sm" @tap="goCreate" v-else>立即领取</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				type: Object,
				default: null
			},
			isGoods: {
				type: Boolean,
				default: false
			}
		},
		filters: {
			mathTruePrice(value, discount) {
				return (parseFloat(value) * parseFloat(discount) / 100).toFixed(2)
			},
		},
		created: function(e) {
			this.now = new Date().getTime() / 1000
		},
		data() {
			return {
				now: 0,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				loading: false,
			}
		},
		methods: {
			goCreate() {
				if (this.$common.loginAuth(true)) {
					if (this.loading) return
					this.loading = true
					uni.showLoading({
						title: '领取中...'
					})
					this.$http
						.post('marketing_coupon_type_create', {
							id: this.value.id
						})
						.then((response) => {
							console.log(response)
							uni.hideLoading()
							this.$common.showSuccess('领取成功')
							this.value.myGet = 1
							this.loading = false
						})
						.catch((response) => {
							this.loading = false
						})

				}
			},
			goUse() {
				if (this.isGoods) {

				} else {
					uni.navigateTo({
						url: '/pages/shop/index'
					})
				}
			}
		},
	}
</script>

<style>
	.console-control {
		min-width: 200rpx;
		border-radius: 18upx 0 0 18upx;
	}

	.text-xxxl {
		font-size: 60rpx;
	}

	.opacity {
		opacity: 0.5;
	}

	.useimg {
		width: 80rpx;
		height: 80rpx;
	}
</style>
